<template>
  <div class="editdynamic">
    <el-form ref="fomr" :model="formData">
      <el-row class="marginBottom">
        <!-- 日期组件 -->
        <el-col :span="4">
          <el-form-item label="创建日期：">
            <el-date-picker
              v-model="formData.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 点赞数 -->
        <el-col :span="4">
          <el-form-item label="点赞数:">
            <el-input type="text" v-model="formData.start"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <!-- markdown编辑器 -->
          <mavon-editor class="position" v-model="formData.content" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="flex">
          <el-button type="primary" @click="saveUpdate">
            <i class="el-icon-check"></i>保存</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getByIdAPI, updateDyAPI } from '@/API/api'
export default {
  name: 'EditDynamic',
  data() {
    return {
      // 表单数据
      formData: {
        // 文本
        content: '',
        // 日期
        date: '',
        // 点赞数
        start: 0,
        // 可见性
        visibility: false
      }
    }
  },
  methods: {
    // 保存修改
    async saveUpdate() {
      // 定义请求参数
      const data = {
        id: this.$route.params.id,
        content: this.formData.content,
        start: this.formData.start,
        createTime: this.formData.date
      }
      try {
        const { data: res } = await updateDyAPI(data)
        // console.log(res)
        if (res.status !== 0) return this.$message.error(res.msg)
        this.$message.success(res.msg)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取动态详情
    async getDynamic(id) {
      const { data: res } = await getByIdAPI(id)
      console.log(res)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.formData.content = res.data.content
      this.formData.date = res.data.createTime
      this.formData.start = res.data.start
      this.$message.success(res.msg)
    }
  },
  created() {
    // console.log(this.$route.params.id)
    this.getDynamic(this.$route.params.id)
  }
}
</script>

<style lang="less" scoped>
.editdynamic {
  padding: 20px 20px 0;
  .marginBottom {
    margin-bottom: 15px;
  }
  .vertical {
    margin: 56px 0 0 55px;
  }
  .flex {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
